<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>监控管理</title>
	<link rel="stylesheet" href="../css/common.css">
	<link rel="stylesheet" href="../css/motai2.css">
	<link rel="stylesheet" href="../css/skyblue/elements.css">
	<style>
		.main-nav2 {
			margin-left: calc(2% - 10px);
		}

		iframe {
			width: 100%;
			min-height: 800px;
		}

		/* skyblue */
		.skyblue .button-primary a {
			color: white;
		}
	</style>

</head>

<body class="main-body">
	<div id="vue-root" :class="theme">
		<ul class="main-nav2 main-nav-tree basis">

			<li v-for="(menu,index) in menues" :key="index" class="main-side-item2 "
				:class="{'button-primary':mainItem==index,'main_itemed':mainItem==index}" @click="mainItem=index">
				<a target="myiframe1" :href="menu.ref">
					<div v-text="menu.title"></div>
				</a>
			</li>
		</ul>
		<iframe src="basis_monitor_public.html" name="myiframe1" scrolling="auto"></iframe>

	</div>
	<script src="/scriptZIP/vue.min.js"></script>

	<script>
		var app = new Vue({
			el: '#vue-root',
			data: {
				mainItem: 0,
				menues: [{
					title: "公共区域",
					ref: "basis_monitor_public.html",
				}, {
					title: "教学区域",
					ref: "basis_monitor_school.html",
				}]
			},
			computed: {
				theme() {
					return localStorage['theme']
				}
			},
		});
	</script>
</body>

</html>